<template>
  <view>
    <y-tabs v-model="active" sticky :offsetTop="43" color="#007aff">
      <y-tab v-for="item in tabsList" :key="item.value" :title="item.title"> </y-tab>
    </y-tabs>

    <component :is="getComponent()" />

    <!--    <DoubleColor v-if="active === 0" />-->
<!--    <happy8 v-if="active === 1" />-->
<!--    <fucai3d v-if="active === 2" />-->
  </view>
</template>

<script setup>
import {ref,computed} from 'vue';
import DoubleColor from "./components/double-color.vue";
import Happy8 from "./components/happy8.vue";
import Fucai3d from "./components/fucai3d.vue";

const active = ref(0);

const tabsList = [
  {
    title: '双色球',
    value: 0,
  },
  {
    title: '快乐8',
    value: 1,
  },
  {
    title: '福彩3D',
    value: 2,
  }
];
const getComponent = () => {
  switch (active.value) {
    case 0:
      return DoubleColor;
    case 1:
      return Happy8;
    case 2:
      return Fucai3d;
    default:
      return null;
  }
};
</script>

<style lang="scss" scoped>
  page {
    background-color: #f5f5f5;
  }
</style>
